<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>回复评论</title>
	<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0, maximum-scale=1.0">
	<meta name="apple-mobile-web-app-capable" content="yes">
	<meta name="format-detection" content="telephone=no">
    <link type="text/css" rel="stylesheet" media="screen" href="__PUBLIC__/app/css/mrs.css{$JSDEBUG}"/>
    <link type="text/css" rel="stylesheet" media="screen" href="__PUBLIC__/app/css/media.css{$JSDEBUG}"/>
    <script type="text/javascript" src="__PUBLIC__/app/js/jquery-1.9.1.min.js"></script>
</head>
<body style="background:#efefef;">
	<include file="Public/customHeader" title="回复评论" url="javascript:history.go(-1);"/>
 	<section class="pinjia">
     <div class="mry_two mainhack">
         <div class="mar_two_head headhack">
             <img src="__PUBLIC__/app/images/pinjia_03.jpg">
             <ul>
                <li>服务项目：<span>{$service.service_name}</span></li>
                <li>服务时长：<span>{$service.service_time}分钟</span></li>
                <li>预约时间：<span>{$order.order_time|date="Y-m-d H:i:s",###}</span></li>
             </ul>
         </div>
         <div class="mar_two_main">
	         <if condition="$user_info ['headerimg']">
	          <img src="{$user_info ['headerimg']}">
	          <else />
	          <img src="__PUBLIC__/app/images/mrydetail_05.png">
	          </if>
             <ul>
                <li>
                <span>{$user_info.mobile}</span>
                <label>满意度：<for start="0" end="$comment['start']"><i></i></for></label>
                </li>
                <li><strong>专业：<span>{$comment.professional}分</span></strong><strong>守时：<span>{$comment.punctuality}分</span></strong><strong>沟通：<span>{$comment.communication}分</span></strong></li>
                <li><p>{$comment.content}</p></li>
             </ul>
         </div>
         <if condition="$comment['photos']">
         <div class="pic_pin">
         	<a href="{:U('/Comments/commentDetail/id/'.$comment['id'])}">
             <ul>
             	<foreach name="comment.photos" item="photo">
                <li><img src="__UPLOADS__/Comment/{$photo.upload_number}/{$photo.img_name}"></li>
                </foreach>
             </ul>
             </a>
         </div>
         </if>
         <dd>{$comment.createtime|date="Y-m-d H:i:s",###}</dd>
         <if condition="!$reply">
         <a class="pj_btn detail_btn"><span>回复</span></a>
         </if>
      </div>
      <if condition="!$reply">
      <div class="mrs_three">
      	<form action="{:U('Beautician/reply')}" method="post">
      	<input type="hidden" name="parentid" value="{$comment.id}">
      	<input type="hidden" name="post_id" value="{$order.id}">
      	<input type="hidden" name="uid" value="{$order.beautician_id}">
      	<input type="hidden" name="to_uid" value="{$order.user_id}">
      	<input type="hidden" name="url" value="">
      	<input type="hidden" name="professional" id="professional" value="0">
	    <input type="hidden" name="punctuality" id="punctuality" value="0">
	    <input type="hidden" name="communication" id="communication" value="0">
	    <input type="hidden" name="number" id="number" value="{$number}">
        <textarea name="content" maxlength="500" placeholder="服务效果如何，是否严格按流程，利益是否得体（评论至少3-500个字哦）" ></textarea>
        <div class="pic_add">
             <ul>
                <li>
                	<div>
                		<img id="uploadCommentPhoto" src="__FONT__/images/pinjia_05.jpg" >
                	</div>
                </li>
             </ul>
        </div>
        <input type="submit" value="提交" class="pj_submit submitForm">
        </form>
      </div>
	</section>

	<script type="text/javascript" src="http://api.map.baidu.com/api?v=1.3"></script>
	<include file="Public/share-js" />
	<script type="text/javascript">
	$(function () {
		$('.submitForm').click(function () {
			history.replaceState(1, "美容师评价列表",'{:U("Beautician/myComment")}');
			$('form').submit();
		});
		$('input[name="url"]').val(window.location.href);

		var images = {
			localId: [],
			serverId: [],
			downloadId: []
		};
		
		function deleteImage(elem) {
			var photoDom = $(elem).parents('li'),
				index = photoDom.index() - 1;
			
			images.localId.splice(index, 1);
			images.serverId.splice(index, 1);
			images.downloadId.splice(index, 1);
			
			photoDom.remove();
			return false;
		}
		
		function showImage(start) {
			$.each( images.downloadId, function(i, n){
				if (i >= start) {
					var html = '<li>'
							+'<a class="delete" href="javascript:;"></a>'
		 	          		+'<input type="hidden" name="comment_photo[]" value="'+images.serverId [i]+'">'
		 	          		+'<img src="'+n+'" />'
	 	          		+'</li>';
	 	          	var uploadElem = $(html);
	 				$('.pic_add li:last').after(uploadElem);
	 				$(uploadElem).find('.delete').click(function () {
	 					deleteImage(this);
	 	          	});
				}
        	});
		}
		
		function download(start) {
			var l = images.serverId.length;
			 $.each(images.serverId, function (i, n) {
				 if (i >= start) {
					 wx.downloadImage({
	                     serverId: n,
	                     isShowProgressTips: 1, // 默认为1，显示进度提示
	                     success: function (res) {
	                         images.downloadId.push(res.localId);
	                         if (i == (l - 1)) {
	                        	 showImage(start);
	                         }
	                     },
	                 });
				 }
             });
		}
		 
		$("#uploadCommentPhoto").click(function () {
			if (images.localId.length < 5) {
				var limit = 5 - images.localId.length;
				wx.chooseImage({
				    count: limit, // 默认9
				    sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图，默认二者都有
				    sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机，默认二者都有
				    success: function (res) {
				    	var start = images.localId.length;
				    	
				    	if (!images.localId.length) {
				    		images.localId = res.localIds;
				    	} else {
				    		var l = images.localId.length;
				    		for (var i = 0; i < res.localIds.length; i++) {
				    			images.localId [l] = res.localIds [i];
				    			l++;
				    		}
				    	}
				        
				        var j = start;length = images.localId.length;
				        function upload() {
				          wx.uploadImage({
				            localId: images.localId[j],
				            success: function (res) {
				            	j++;
				              	images.serverId.push(res.serverId);
				              if (j < length) {
				                upload();
				              } else {
				            	  download(start);
				              }
				            },
				            fail: function (res) {
				              alert(JSON.stringify(res));
				            }
				          });
				        }
				        upload();
				    },
				    fail: function (res) {
				    	alert(JSON.stringify(res));
				    }
				});
			} else {
				alert('最多只能上传5张图片');
			}
		});
	});
	</script>
	<else />
      <div class="mrs_addpj">
		 <div class="mrs_pjmain">
	    	<if condition="$beautician['profile_img']">
	    	<img src="__UPLOADS__/Profile/{$beautician['profile_img']}">
	    	<else />
	    	<img src="__PUBLIC__/app/images/defaultProfile.png">
	    	</if>
	       	<span>{$beautician.name}</span>
	   	</div>
		<p><span>回复：</span>{$reply.content}</p>
		<if condition="$reply['photos']">
	   	<div class="pic_pin">
		   	<a href="{:U('/Comments/commentDetail/id/'.$reply['id'])}">
		      <ul>
		      	<foreach name="reply.photos" item="photo">
		          <li><img src="__UPLOADS__/Comment/{$photo.upload_number}/{$photo.img_name}"></li>
		          </foreach>
		      </ul>
		   	</a>
	   	</div>
	   	</if>
		<dd>{$reply.createtime|date="Y-m-d H:i:s",###}</dd>
	</div>
	</if>
</body>
</html>